<template>
    <div>

        <span>搜索订单：</span>
        <el-select v-model="searchType" placeholder="请选择搜索类别" style='width: 160px'>
            <el-option v-for="item in searchTypeTable" :label="item.name" :value="item.value"></el-option>
        </el-select>
        <el-input
                placeholder="请输入搜索关键字"
                style="position: relative;left: 5px; width: 260px"
                v-model="searchKeyword"
                clearable>
        </el-input>
        <el-button type="primary" icon="el-icon-search" style="position: relative;left: 10px;"
                   @click="searchOrderMethod">搜索
        </el-button>

        <el-button type="text" style="position: relative;left: 15px;" @click="exitSearch">退出搜索</el-button>

        <div style='float: right'>
            <el-button v-if="loginRole === 'admin'" icon='el-icon-circle-plus-outline' @click='exportButton'
                       size='small' type="success" round>导出excel
            </el-button>
        </div>


        <div>
            <el-table
                    :data="orderInfoTable"
                    style="width: 100%"
                    :border='border'>
                <el-table-column
                        prop="orderId"
                        label="订单号"
                        width="60"
                        show-overflow-tooltip>
                </el-table-column>

                <div v-if='loginRole === "admin" '>
                    <el-table-column
                            prop="storeName"
                            label="店铺名"
                            width="180">
                    </el-table-column>
                </div>

                <el-table-column
                        prop="buyerName"
                        label="买家姓名"
                        width="160">
                </el-table-column>

                <el-table-column
                        prop="buyerPhone"
                        label="买家手机号"
                        width="160">
                </el-table-column>

                <el-table-column
                        prop="buyerAddress"
                        label="买家配送地址"
                        width="180"
                        show-overflow-tooltip>
                </el-table-column>

                <el-table-column
                        prop="buyerRemark"
                        label="买家备注"
                        width="180"
                        show-overflow-tooltip>
                </el-table-column>

                <el-table-column
                        prop="orderAmount"
                        label="订单总金额(元)"
                        width="160">
                </el-table-column>

                <el-table-column
                        prop="orderStatus"
                        label="订单状态"
                        width="160">
                    <template slot-scope="scope">
                        <el-tag v-if='scope.row.orderStatus === 0'>新下单</el-tag>
                        <el-tag v-else-if='scope.row.orderStatus === 1'>商家确认订单</el-tag>
                        <el-tag v-else-if='scope.row.orderStatus === 2'>配送员接单配送中</el-tag>
                        <el-tag type='success' v-else-if='scope.row.orderStatus === 3'>订单已完成</el-tag>
                        <el-tag type='info' v-else-if='scope.row.orderStatus === 4'>用户已取消</el-tag>
                        <el-tag type='info' v-else-if='scope.row.orderStatus === 5'>商家已取消</el-tag>
                        <el-tag v-else>用户已评价</el-tag>
                    </template>
                </el-table-column>

                <el-table-column
                        prop="createTime"
                        label="下单时间"
                        width="180">
                </el-table-column>


                <el-table-column
                        fixed="right"
                        label="操作"
                        width="100">

                    <template slot-scope="scope">
                        <el-button @click="orderDetailMethod(scope.row.orderId)" type="text" size="small">详情</el-button>
                        <el-button @click='orderDeleteMethod(scope.row.orderId)' type="text" size="small">删除</el-button>
                    </template>

                </el-table-column>
            </el-table>


            <el-pagination
                    background
                    layout="prev, pager, next"
                    @current-change='selectPage'
                    :page-size='size'
                    :total='total'>
            </el-pagination>


            <!-- Form -->

            <el-dialog title="订单详情" :visible.sync="orderDetailV" width='70%'>

                <el-card class="box-card">

                    <el-descriptions :column="2" size="medium">
                        <el-descriptions-item label="订单id">
                            <el-link type="primary">{{orderDetail.orderId}}</el-link>
                        </el-descriptions-item>
                        <el-descriptions-item label="所属店铺">
                            <el-link type="primary">{{orderDetail.storeName}}</el-link>
                        </el-descriptions-item>
                        <el-descriptions-item label="配送员">
                            <el-link type="primary">{{orderDetail.runnerName}}</el-link>
                        </el-descriptions-item>
                        <el-descriptions-item label="配送员号码">
                            <el-link type="primary">{{orderDetail.runnerPhone}}</el-link>
                        </el-descriptions-item>
                        <el-descriptions-item label="买家名">
                            <el-link type="primary">{{orderDetail.buyerName}}</el-link>
                        </el-descriptions-item>
                        <el-descriptions-item label="买家号码">
                            <el-link type="primary">{{orderDetail.buyerPhone}}</el-link>
                        </el-descriptions-item>
                        <el-descriptions-item label="配送地址">
                            <el-link type="primary">{{orderDetail.buyerAddress}}</el-link>
                        </el-descriptions-item>
                        <el-descriptions-item label="买家备注">
                            <el-link type="primary">{{orderDetail.buyerRemark}}</el-link>
                        </el-descriptions-item>
                        <el-descriptions-item label="订单总价">
                            <el-link type="primary">{{orderDetail.orderAmount}}</el-link>
                        </el-descriptions-item>
                        <el-descriptions-item label="订单状态">
                            <el-link v-if='orderDetail.orderStatus === 0'>新下单</el-link>
                            <el-link v-else-if='orderDetail.orderStatus === 1'>商家确认订单</el-link>
                            <el-link v-else-if='orderDetail.orderStatus === 2'>配送员接单配送中</el-link>
                            <el-link type='success' v-else-if='orderDetail.orderStatus === 3'>订单已完成</el-link>
                            <el-link type='info' v-else-if='orderDetail.orderStatus === 4'>用户已取消</el-link>
                            <el-link type='info' v-else-if='orderDetail.orderStatus === 5'>商家已取消</el-link>
                            <el-link v-else>用户已评价</el-link>
                        </el-descriptions-item>
                        <el-descriptions-item label="下单时间">
                            <el-link type="primary">{{orderDetail.createTime}}</el-link>
                        </el-descriptions-item>
                    </el-descriptions>

                    <el-form :model="orderDetail" ref="ruleForm" class="demo-ruleForm">

                        <el-form-item label="购买列表" prop="name">
                            <template>
                                <el-table
                                        :data="orderDetail.orderDetailVOList"
                                        max-height="250"
                                        border
                                >
                                    <el-table-column
                                            prop="foodName"
                                            label="菜品名"
                                            width="180">
                                    </el-table-column>
                                    <el-table-column
                                            prop="foodPrice"
                                            label="菜品单价"
                                            width="80">
                                    </el-table-column>
                                    <el-table-column
                                            prop="foodQuantity"
                                            label="订购数量"
                                            width="80">
                                    </el-table-column>

                                    <el-table-column
                                            prop="foodIcon"
                                            label="菜品图片">
                                        <template slot-scope="scope">
                                            <img :src="scope.row.foodIcon" width="60"/>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </template>
                        </el-form-item>

                    </el-form>
                </el-card>

            </el-dialog>

            <el-dialog title="导出excel" :visible.sync="excelV">

                <el-card class="box-card" shadow='hover'>
                    <el-switch
                            v-model="allDays"
                            active-text="所有"
                            @change='change1'>
                    </el-switch>

                    <span v-show='show'>
                    <el-input-number style='margin-left: 30px' v-model="excelDays" :min="1" :max="30"
                                     label="描述文字"></el-input-number>
                    <el-link style='margin-left: 3px' type="primary">天内订单</el-link>
                </span>

                </el-card>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="excelV = false">取 消</el-button>
                    <el-button type="primary" @click='exportMethod'>导 出</el-button>
                </div>
            </el-dialog>
        </div>

        <div style='float: right;margin-bottom:80px'>
            <el-link type="primary">数据总条数:{{total}}</el-link>
        </div>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                allDays: false,
                show: true,
                excelDays: null,
                excelV: false,
                border: true,
                searchKeyword: '',
                searchType: '',
                searchTypeTable: [
                    {
                        name: '订单号',
                        value: 'order_id'
                    },
                    {
                        name: '买家名',
                        value: 'buyer_name'
                    },
                    {
                        name: '手机号',
                        value: 'buyer_phone'
                    }
                ],
                loginRole: localStorage.getItem('loginRole'), //获取当前用户身份
                searching: false, //是否正在搜索
                orderDetailV: false,//订单详情对话框
                total: 100, //总数
                size: 10, //没页数据条数
                orderInfoTable: [],
                orderDetail: {  //订单详情
                    orderId: null,
                    storeName: null,
                    runnerName: null,
                    runnerPhone: null,
                    buyerName: null,
                    buyerPhone: null,
                    buyerAddress: null,
                    buyerRemark: null,
                    orderAmount: null,
                    orderStatus: null,
                    orderDetailVOList: [],
                    createTime: null
                }
            }
        },
        created() {
            const _this = this;
            this.getFirstOrderData();
        },
        methods: {
            //获取第一页订单信息
            getFirstOrderData() {
                const _this = this;
                if (this.loginRole === 'admin') { //管理员
                    this.$http.get('dev-api/admin/order/list/1/10')
                        .then(function (resp) {
                            if (resp.data.code === 0) {
                                _this.orderInfoTable = resp.data.data.content;
                                _this.total = resp.data.data.total;
                                console.log(_this.orderInfoTable)
                            } else {
                                _this.$message.error(resp.data.msg);
                            }
                        })
                } else {  //商家
                    this.$http.get('dev-api/seller/order/list/1/10')
                        .then(function (resp) {
                            if (resp.data.code === 0) {
                                _this.orderInfoTable = resp.data.data.content;
                                _this.total = resp.data.data.total;
                                console.log(_this.orderInfoTable)
                            } else {
                                _this.$message.error(resp.data.msg);
                            }
                        })
                }


            },

            //查询某一页数据
            //判断searching来确定此时是全部菜品查看还是分类检索
            selectPage(currentPage) {
                const _this = this;
                if (this.searching === true) {  //搜索中

                    if (this.loginRole === 'admin') {
                        this.$http.get('dev-api/admin/order/like/' + _this.searchType + '/' + _this.searchKeyword + '/' + currentPage + '/10')
                            .then(function (resp) {
                                if (resp.data.code === 0) {
                                    _this.orderInfoTable = resp.data.data.content;
                                    _this.total = resp.data.data.total;
                                    console.log(_this.orderInfoTable)
                                } else {
                                    _this.$message.error(resp.data.msg);
                                }
                            })
                    } else {
                        this.$http.get('dev-api/seller/order/like/' + _this.searchType + '/' + _this.searchKeyword + '/' + currentPage + '/10')
                            .then(function (resp) {
                                if (resp.data.code === 0) {
                                    _this.orderInfoTable = resp.data.data.content;
                                    _this.total = resp.data.data.total;
                                    console.log(_this.orderInfoTable)
                                } else {
                                    _this.$message.error(resp.data.msg);
                                }
                            })
                    }


                } else {  //全部查看
                    if (this.loginRole === 'admin') {
                        this.$http.get('dev-api/admin/order/list/' + currentPage + '/10')
                            .then(function (resp) {
                                if (resp.data.code === 0) {
                                    _this.orderInfoTable = resp.data.data.content;
                                    _this.total = resp.data.data.total;
                                    console.log(_this.orderInfoTable)
                                } else {
                                    _this.$message.error(resp.data.msg);
                                }
                            })
                    } else {
                        this.$http.get('dev-api/seller/order/list/' + currentPage + '/10')
                            .then(function (resp) {
                                if (resp.data.code === 0) {
                                    _this.orderInfoTable = resp.data.data.content;
                                    _this.total = resp.data.data.total;
                                    console.log(_this.orderInfoTable)
                                } else {
                                    _this.$message.error(resp.data.msg);
                                }
                            })
                    }

                }

            },


            //退出搜索
            exitSearch() {
                this.searching = false;
                this.searchType = '';
                this.searchKeyword = '';
                this.getFirstOrderData();
                this.$message.success("已退出搜索，现在为全部订单")
            },
            //查看订单详情
            orderDetailMethod(orderId) {
                const _this = this;
                this.orderDetailV = true;
                //查询数据
                this.$http.get('dev-api/seller/order/detail/' + orderId)
                    .then(function (resp) {
                        if (resp.data.code === 0) {
                            _this.orderDetail = resp.data.data;
                            _this.$message.success("获取成功");
                        } else {
                            _this.$message.error(resp.data.msg);
                        }

                    })
            },
            //删除订单
            orderDeleteMethod(orderId) {

                const _this = this;
                this.$confirm('删除订单[' + orderId + '], 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    if (_this.loginRole === 'admin') { //管理员删除订单
                        _this.$http.delete('dev-api/admin/order/delete/' + orderId)
                            .then(function (resp) {
                                if (resp.data.code === 0) {
                                    _this.$message.success("删除成功");
                                    _this.getFirstOrderData();
                                } else {
                                    _this.$message.error(resp.data.msg);
                                }

                            })
                    } else { //商家删除订单
                        _this.$http.delete('dev-api/seller/order/delete/' + orderId)
                            .then(function (resp) {
                                if (resp.data.code === 0) {
                                    _this.$message.success("删除成功");
                                    _this.getFirstOrderData();
                                } else {
                                    _this.$message.error(resp.data.msg);
                                }

                            })

                    }


                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });


            },
            //搜索订单
            searchOrderMethod() {
                const _this = this;
                _this.searching = true;
                if (_this.searchType === '' || _this.searchKeyword === '') {
                    _this.$message.error("请先选择搜索类别和关键字");
                } else {
                    if (_this.loginRole === 'admin') {
                        _this.$http.get('dev-api/admin/order/like/' + _this.searchType + '/' + _this.searchKeyword + '/1/10')
                            .then(function (resp) {
                                if (resp.data.code === 0) {
                                    _this.orderInfoTable = resp.data.data.content;
                                    _this.total = resp.data.data.total;
                                } else {
                                    _this.$message.error(resp.data.msg);
                                }
                            })
                    } else {
                        _this.$http.get('dev-api/seller/order/like/' + _this.searchType + '/' + _this.searchKeyword + '/1/10')
                            .then(function (resp) {
                                if (resp.data.code === 0) {
                                    _this.orderInfoTable = resp.data.data.content;
                                    _this.total = resp.data.data.total;
                                } else {
                                    _this.$message.error(resp.data.msg);
                                }
                            })
                    }


                }

            },

            exportButton() {
                this.excelV = true;
            },
            change1() {
                this.show = !this.show;
            },
            exportMethod() {
                this.$message.success('导出成功')
                this.excelV = false;
                if (this.allDays === true) {
                    //导出全部订单
                    window.location.href = this.APIurl.apiUrl.domainName + 'admin/order/export/0';
                } else {
                    //导出几天内订单
                    window.location.href = this.APIurl.apiUrl.domainName + 'admin/order/export/' + this.excelDays;
                }
            }

        }
    }
</script>
